<!--
 * @Description: 维修项目查询选择
 * @Autor: 何兴家
 * @Date: 2020-11-17 16:59:10
 * @LastEditors: 马毅
 * @LastEditTime: 2021-06-01 20:30:09
-->

<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="100" @filterChange="handleSearch"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="repair_repairReception_precontractArrange"
      height="auto"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :columns="tableColumns"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.tableColumns = columns)"
      selectionType="single"
      :onRowSelectChange="handleTableSelect"
    >
    </FilterTable>

    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';

import { getWxproductList } from '@/api/repair/common';

export default {
  props: ['modelId'],
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      tableColumns: this.createTableColumns(),
      selectedRows: [], // 选中的行项
      fetchapi: getWxproductList,
      fetchParams: { xhrAbort: true }
    };
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '维修项目代码',
          fieldName: 'labourCode',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '维修项目名称',
          fieldName: 'labourName',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '项目来源',
          fieldName: 'oemTag',
          // itemList: [
          //   { text: '厂端下发', value: '1' },
          //   { text: '店端自建', value: '0' }
          // ],
          itemList: this.createDictList('1045')
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '维修项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '标准工时',
          dataIndex: 'STD_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工工时',
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔工时',
          dataIndex: 'CLAIM_LABOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目来源',
          dataIndex: 'DATA_SOURCES',
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: this.createDictList('1045')
        },
        {
          title: '创建日期',
          dataIndex: 'CREATED_AT',
          sorter: true,
          filter: true,
          filterType: 'date'
        },
        {
          title: '更新日期',
          dataIndex: 'UPDATED_AT',
          sorter: true,
          filter: true,
          filterType: 'date'
        }
      ];
    },
    // 点击搜索
    handleSearch(val) {
      this.fetchParams = { xhrAbort: false, ...val, modelId: this.modelId };
    },
    // 列表选中变化
    handleTableSelect(list) {
      this.selectedRows = list;
    },
    // 点击确定
    handleConfirm() {
      if (!this.selectedRows.length) return notifyAction('请选择维修项目', 'warning');
      this.$emit('onConfirm', this.selectedRows[0]);
      this.$emit('close');
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
